<template>
  <md-nav-bar :title="data.type === 'my' ? '积分交易明细' : '积分抵扣明细'" />
  <div class="container">
    <view class="list">
      <md-page-list :api="api" @change="pageChange" resKey="data">
        <view class="list-item" v-for="item in data.list" :key="item.id" @click="() => handleDetail(item)">
          <block v-if="data.type == 'my'">
            <view class="left flex">
              {{ item?.desc }}
              <view>交易时间：{{ item.createtime }}</view>
            </view>
            <view class="right flex">
              <text class="point">{{ item.score }}</text>
              <view class="btn">{{ item.type_name }}</view>
            </view>
          </block>
          <block v-else>
            <view class="left flex">
              {{ item?.nickname }}
              <view>交易时间：{{ item.createtime }}</view>
            </view>
            <view class="right flex">
              <text class="point">{{ item.memo }}</text>
            </view>
          </block>
        </view>
      </md-page-list>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { scoreRecord as fetchScoreRecord, scoreCheckRecord } from '@/api';

const data = reactive<any>({
  type: '',
  configInfo: {},
  list: [],
});
const api = ref<any>();

// 数据回调
const pageChange = (list: any) => {
  data.list = list;
};

const handleDetail = (item: any) => {
  if (data.type == 'my') return;
  uni.navigateTo({ url: '/pages/other/points/detail?record_id=' + item.id });
};

/**
 * 接口相关
 */
onLoad(option => {
  const configInfo = uni.getStorageSync('configInfo') ? JSON.parse(uni.getStorageSync('configInfo')) : '';
  if (configInfo) {
    data.configInfo = configInfo;
  }
  data.type = option?.type;
  api.value = data.type === 'my' ? fetchScoreRecord : scoreCheckRecord;
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  .list {
    .list-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #ffffff;
      border-radius: 10rpx;
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      &:not(:last-of-type) {
        margin-bottom: 20rpx;
      }
      font-size: 28rpx;
      color: $title;
      .left,
      .right {
        gap: 20rpx;
        flex: 1;
        flex-direction: column;
      }
      .right {
        align-items: flex-end;
      }
      .point {
        color: red;
      }
      .btn {
        color: $primary;
      }
    }
  }
}
</style>
